<template>
  <div style="width: 100%">
  <div style="height: 60%;width: 60%; margin: 0 auto;">

    <el-upload class="upload-demo" multiple drag :on-change="uploadChange"
          action="#"
          :before-remove="beforeRemove"
          :on-remove="upLoadRemove"
          :file-list="fileList"
          :auto-upload="false">
      <el-icon class="el-icon--upload">
        <upload-filled />
      </el-icon>
      <div class="el-upload__text">
        <!-- Drop file here or <em>click to upload</em> -->
      </div>
      <template #tip>
        <div class="el-upload__tip">

        </div>
      </template>
      
    </el-upload>
    <span slot="footer" class="dialog-footer">
        <el-button style="width: 30%; margin-top: 20px" type="primary" @click="submitUpload">生成</el-button>
      </span>
    <div style="height: 10%;width: 100%;display: block;"></div>

    <div style="margin: 300px auto 50px; width: fit-content; "><a style="color:gray" href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022034257号-1</a></div>
  </div>
  </div>
</template>

<script>
import { UploadFilled } from '@element-plus/icons-vue'
import axios from 'axios'
import { baseUrl } from './network/network.js'
export default {
  data() {
    return {
      
    }
  },
  methods: {
    // 拖拽上传
    beforeRemove(file, fileList) {
      this.fileList = fileList;
      // return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 移除附件
    upLoadRemove(file, fileList) {
      let tempFileList = [];
      for (var index = 0; index < this.fileList.length; index++) {
        if (this.fileList[index].name !== file.name) {
          tempFileList.push(this.fileList[index]);
        }
      }
      this.fileList = tempFileList;
    },
    // 监控上传文件列表
    uploadChange(file, fileList) {
      let existFile = fileList
        .slice(0, fileList.length - 1)
        .find((f) => f.name === file.name);
      if (existFile) {
        this.$message.error("当前文件已经存在!");
        fileList.pop();
      }
      this.fileList = fileList;
    },
    // 上传到服务器  formidable接收
    async submitUpload() {
      // 上传文件大小不能超过100MB!
      if(this.fileList.length<1){
        return;
      }
      const isLt100M = this.fileList.every(
        (file) => file.size / 1024 / 1024 < 20
      );
      let formData = new FormData();
      this.fileList.forEach((item) => {
        formData.append("files", item.raw);
      });
      // append追加后console.log后仍为空,需要用formData.get("键")的方法获取值
      // const res = await fileUpload(formData);
      // console.log(res);
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }, //这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值
        responseType: 'blob'
      };
      axios.post(baseUrl + 'upload', formData, config).then((res) => {

        let fileName = res.headers["content-disposition"].split("=")[1];
        fileName =decodeURIComponent(fileName);
        let suffix = 'xls'


        let url = window.URL.createObjectURL(new Blob([res.data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', fileName + "." + suffix)
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        window.URL.revokeObjectURL(url)


      });
    }
  }
}


</script>

<style >

</style>